<template>
    <div class="drawer_form_mode">
        <el-drawer :title="state ? '文件夹编辑' : '新建文件夹'" v-model="drawerShow" 
            direction="rtl" :before-close="drawerClose" :size="900"
            :close-on-click-modal="false">
            <el-form :model="foldForm" :rules="formRules" ref="formRef" :inline="true" 
                label-position="top" require-asterisk-position="right">
                <el-row :gutter="24" class="width-all">
                    <el-col :span="24"><h4 class="formItemTitle">基本信息</h4></el-col>
                    <el-col :span="24">
                        <el-form-item label="文件夹名称" prop="folderName">
                            <el-input v-model="foldForm.folderName" placeholder="请输入文件夹名称"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24"><h4 class="formItemTitle">权限设置</h4></el-col>
                    <el-col :span="24">
                        <el-form-item label="谁可以查看" prop="selectPowerType">
                            <el-radio-group v-model="foldForm.selectPowerType">
                                <el-radio label="all">集团公司</el-radio>
                                <el-radio label="amoebas">指定巴体</el-radio>
                                <el-radio label="dept">指定部门</el-radio>
                                <el-radio label="user">指定人员</el-radio>
                                <el-radio label="oneself">仅自己</el-radio>
                            </el-radio-group>
                            <div class="oper_area" 
                                :class=" { 'oper_area_expand': foldForm.selectPowerType != 'all' && foldForm.selectPowerType != 'oneself' }">
                                <div class="padding-top-md">
                                    <DataCommunicationBook v-model="foldForm.selectPowerValueArr" :filterSelf="true"
                                        placeholder="请选择指定人员" v-if="foldForm.selectPowerType == 'user'"></DataCommunicationBook>
                                    <el-tree-select v-model="foldForm.selectPowerValueArr" :data="amoebaOption" 
                                        :check-strictly="false" :render-after-expand="false" multiple :props="amoebaProps"
                                        placeholder="请选择指定巴体" v-if="foldForm.selectPowerType == 'amoebas'" />
                                    <el-tree-select v-model="foldForm.selectPowerValueArr" :data="deptOption" 
                                        :check-strictly="false" :render-after-expand="false" multiple :props="deptProps"
                                        placeholder="请选择指定部门" v-if="foldForm.selectPowerType == 'dept'" />
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="谁可以编辑" prop="updatePowerType">
                            <el-radio-group v-model="foldForm.updatePowerType">
                                <el-radio label="amoebas">指定巴体</el-radio>
                                <el-radio label="dept">指定部门</el-radio>
                                <el-radio label="user">指定人员</el-radio>
                                <el-radio label="oneself">仅自己</el-radio>
                            </el-radio-group>
                            <div class="oper_area" 
                                :class=" { 'oper_area_expand': foldForm.updatePowerType != 'oneself' }">
                                <div class="padding-top-md">
                                    <DataCommunicationBook v-model="foldForm.updatePowerValueArr" :filterSelf="true"
                                        placeholder="请选择指定人员" v-if="foldForm.updatePowerType == 'user'"></DataCommunicationBook>
                                    <el-tree-select v-model="foldForm.updatePowerValueArr" :data="amoebaOption" 
                                        :check-strictly="false" :render-after-expand="false" multiple :props="amoebaProps"
                                        placeholder="请选择指定巴体" v-if="foldForm.updatePowerType == 'amoebas'" />
                                    <el-tree-select v-model="foldForm.updatePowerValueArr" :data="deptOption" 
                                        :check-strictly="false" :render-after-expand="false" multiple :props="deptProps"
                                        placeholder="请选择指定部门" v-if="foldForm.updatePowerType == 'dept'" />
                                </div>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="drawerClose">取 消</el-button>
                    <el-button type="primary" @click="submitForm">保 存</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
</template>
<script setup>
    import { ref, watch } from "vue"
    import { listAmoeba } from "@/api/system/amoeba";
    import { listDept } from "@/api/system/dept";
    import useUserStore from '@/store/modules/user'
    import DataCommunicationBook from "@/components/DataComponents/DataCommunicationBook.vue"
    const { proxy } = getCurrentInstance();
    const props = defineProps(['show', 'defaultValue', 'state']);
    const emit = defineEmits(['update:show', 'submit', ]);
    const drawerShow = ref(false);
    const foldForm = ref({ folderName: '', selectPowerType: 'oneself', updatePowerType: 'oneself', 
        updatePowerValueArr: [], selectPowerValueArr: [] })
    const formRules = ref({
        folderName: { required: true, trigger: ['blur'], message: '请输入文件夹名称' },
        selectPowerType: { required: true, trigger: ['blur'], message: '请选择查看权限类型' },
        updatePowerType: { required: true, trigger: ['blur'], message: '请选择编辑权限类型' },
    });
    const amoebaOption = ref([]);
    const amoebaProps = ref({ label: 'amoebaName' });
    const deptOption = ref([]);
    const deptProps = ref({ label: 'deptName' });
    watch(() => props.show, () => {
        drawerShow.value = props.show;
        if(drawerShow.value){
            getAmoebaOptions();
            getDeptOptions();
            if(props.state) setDedefaultValue();
        }else{
            resetFormData();
        }
    }, { deep: true });
    const setDedefaultValue = () => {
        const defaultData = props.defaultValue;
        foldForm.value.id = defaultData.id;
        foldForm.value.folderName = defaultData.folderName;
        foldForm.value.selectPowerType = defaultData.selectPowerType;
        foldForm.value.updatePowerType = defaultData.updatePowerType;
        foldForm.value.selectPowerValueArr = defaultData.selectPowerValue ? defaultData.selectPowerValue.split(',') : [];
        foldForm.value.updatePowerValueArr = defaultData.updatePowerValue ? defaultData.updatePowerValue.split(',') : [];
    };
    const getAmoebaOptions = () => {
        listAmoeba().then(response => { 
            const amoebaList = response.data || [];
            amoebaList.map( item => item.value = item.id );
            amoebaOption.value = proxy.handleTree(amoebaList, "id");
        });
    };
    const getDeptOptions = () => {
        listDept().then(response => {
            const deptList = response.data || [];
            deptList.map( item => item.value = item.deptId );
            deptOption.value = proxy.handleTree(deptList, "deptId");
        });
    };
    const submitDataReorganization = (foldForm) => {
        const submitData = {
            folderName: foldForm.folderName,
            selectPowerType: foldForm.selectPowerType,
            updatePowerType: foldForm.updatePowerType,
            selectPowerValue: '',
            updatePowerValue: '',
        }
        if(foldForm.id) { submitData.id = foldForm.id };
        const selectType = submitData.selectPowerType;
        switch(selectType){
            case 'all': submitData.selectPowerValue = '0'; break;
            case 'oneself': submitData.selectPowerValue = useUserStore().id; break;
            default: submitData.selectPowerValue = foldForm.selectPowerValueArr.length ? foldForm.selectPowerValueArr.join(',') : '0'
        }
        if(submitData.updatePowerType == 'oneself'){
            submitData.updatePowerValue = useUserStore().id;
        }else{
            submitData.updatePowerValue = foldForm.updatePowerValueArr.length ? foldForm.updatePowerValueArr.join(',') : '0'
        }
        return submitData
    };
    const submitForm = () => {
        proxy.$refs["formRef"].validate(valid => {
            if (valid) {
                const submitData = submitDataReorganization(foldForm.value);
                emit('submit', submitData);
            }
        })
    };
    const resetFormData = () => {
        proxy.resetForm("formRef");
        foldForm.value = { folderName: '', selectPowerType: 'oneself', updatePowerType: 'oneself', 
        updatePowerValueArr: [], selectPowerValueArr: [] }
    };
    const drawerClose = () => {
        emit('update:show', false);
        resetFormData();
    };
    defineExpose({drawerClose});
</script>
<style scoped lang="scss">
    :deep(.el-drawer__body){
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        padding: 10px 20px;
    }
    :deep(.el-select){ width: 100%; }
    .oper_area{
        width: 60%;
        height: 0px;
        overflow: hidden;
        box-sizing: border-box;
        transition: 200ms;
    }
    .oper_area_expand{
        height: 45px!important;
    }
</style>